/** 滚动条 */
.rc-scrollbar {
  display: flex;
  justify-content: space-between;
  width: 14px;
  height: 100%;
  transition: opacity 0.2s ease-in-out;
}


.rc-scrollbar-opacity {
  opacity: 0;
}

/** 水平滚动条 */
.rc-scrollbar-horizontal {
  flex-direction: row;
  height: 14px;
  width: 100%;
}

/** 垂直滚动条 */
.rc-scrollbar-vertical {
  flex-direction: column;
  width: 14px;
  height: 100%;
}


/** 轨道 */
.rc-scrollbar-track {
  position: relative;
  background-color: transparent;
  width: 100%;
  height: 100%;
}

/** 滑块 */
.rc-scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ccc;
  border-radius: 4px;
  height: 32px;
  transition: background-color 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
}


.rc-scrollbar-thumb:hover {
  background-color: #bbb;
}


/** 方向按键 */
.rc-direction-button {
  flex-shrink: 0;
  background-color: #ccc;
}

.rc-direction-button:hover {
  background-color: #bbb;
}



.rc-direction-button-horizontal {
  width: 12px;
  height: 100%;
  border-radius: 2px;
}



.rc-direction-button-front-horizontal {
  clip-path: polygon(20% 50%, 80% 0%, 80% 100%);
}

.rc-direction-button-back-horizontal {
  clip-path: polygon(20% 0%, 80% 50%, 20% 100%);
}

.rc-direction-button-vertical {
  width: 100%;
  height: 12px;
  border-radius: 2px;
}


.rc-direction-button-front-vertical {
  clip-path: polygon(50% 20%, 0 80%, 100% 80%);
}

.rc-direction-button-back-vertical {
  clip-path: polygon(50% 80%, 0 20%, 100% 20%);
}
